<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    $toggle-indicator-size: 24px; // changing this number will resize the whole toggle
$track-height: $toggle-indicator-size + 6;
$track-width: $toggle-indicator-size * 2.5;
$highContrastModeSupport: solid 2px transparent;
/* 

The following vars come from my theme. 
You'll need to replace with your own color values. 

- "$light"
- "$mid"
- "$dark"

*/
$track-border: $mid;
$track-background: $light;
$focus-ring: 0px 0px 0px 2px $dark;

// Toggle specific styles
.toggle {
	align-items: center;
	border-radius: 100px;
	display: flex;
	font-weight: 700;
	margin-bottom: 16px;

	&:last-of-type {
		margin: 0;
	}
}

// Since we can't style the checkbox directly, we "hide" it so we can draw the toggle.
.toggle__input {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;

	// This style sets the focus ring. The ":not([disabled])" prevents the focus ring from creating a flash when the element is clicked.
	&:not([disabled]):active + .toggle-track,
	&:not([disabled]):focus + .toggle-track {
		border: 1px solid transparent;
		box-shadow: $focus-ring;
	}

	&:disabled + .toggle-track {
		cursor: not-allowed;
		opacity: 0.7;
	}
}

.toggle-track {
	background: $track-background;
	border: 1px solid $track-border;
	border-radius: 100px;
	cursor: pointer;
	display: flex;
	height: $track-height;
	margin-right: 12px;
	position: relative;
	width: $track-width;
}

.toggle-indicator {
	align-items: center;
	background: $dark;
	border-radius: $toggle-indicator-size;
	bottom: 2px;
	display: flex;
	height: $toggle-indicator-size;
	justify-content: center;
	left: 2px;
	outline: $highContrastModeSupport;
	position: absolute;
	transition: $speed;
	width: $toggle-indicator-size;
}

// The check mark is optional
.checkMark {
	fill: #fff;
	height: $toggle-indicator-size - 4;
	width: $toggle-indicator-size - 4;
	opacity: 0;
	transition: opacity $speed ease-in-out;
}

.toggle__input:checked + .toggle-track .toggle-indicator {
	background: $dark;
	transform: translateX($track-width - $track-height);

	.checkMark {
		opacity: 1;
		transition: opacity $speed ease-in-out;
	}
}

@media screen and (-ms-high-contrast: active) {
	.toggle-track {
		border-radius: 0;
	}
}

</style>
<body>
    <div class="card">
        <div class="content-wrapper">
            <h2 class="heading">Accessible Toggle Switch</h2>
            <p>The following demo shows how to build and style a custom toggle switch using a semantic checkbox.</p>
        </div>
    
        <div class="demo">
            <!-- begin toggle markup	 -->
    
            <label class="toggle" for="uniqueID">
                <input type="checkbox" class="toggle__input" id="uniqueID" />
                <div class="toggle-track">
                    <div class="toggle-indicator">
                        <!-- 	This check mark is optional	 -->
                        <div class="checkMark">
                            <svg viewBox="0 0 24 24" id="ghq-svg-check" role="presentation" aria-hidden="true">
                                <path d="M9.86 18a1 1 0 01-.73-.32l-4.86-5.17a1.001 1.001 0 011.46-1.37l4.12 4.39 8.41-9.2a1 1 0 111.48 1.34l-9.14 10a1 1 0 01-.73.33h-.01z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                Enabled toggle label
            </label>
    
            <!-- end toggle markup	 -->
    
            <label class="toggle" for="disabledDemo">
                <input type="checkbox" class="toggle__input" id="disabledDemo" disabled />
                <div class="toggle-track">
                    <div class="toggle-indicator">
                        <div class="checkMark">
                            <svg viewBox="0 0 24 24" id="ghq-svg-check" role="presentation" aria-hidden="true">
                                <path d="M9.86 18a1 1 0 01-.73-.32l-4.86-5.17a1.001 1.001 0 011.46-1.37l4.12 4.39 8.41-9.2a1 1 0 111.48 1.34l-9.14 10a1 1 0 01-.73.33h-.01z"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                Disabled toggle label
            </label>
        </div>
    </div>
</body>
</html>